<template>
	<view class="content">
		<shop-head v-show="tabsIndex === 1"></shop-head>
		<video v-show="liveplay" :src="inform.cover" style="width: 100%;" autoplay controls loop muted
			position="absolute" object-fit="fill"></video>

		<view v-if="!liveplay"><u-image width="100%" height="200" :src="inform.cover" /></view>

		<view class="flex-x" v-if="!liveplay">
			<view style="font-size:16px;font-weight: bold;"><text class="shenlan"><text
						style="color:red;font-size:30rpx">开播剩余时长 </text><text
						style="font-size: 22rpx;">{{ time }}</text></text></view>
			<view>
				<view class="btn-item">
					<text>开播提醒</text>
				</view>
			</view>
		</view>
		<view style="color:#aaa;font-size:20rpx;padding: 0px 10rpx;" class="ml-10 mb-10" v-if="!liveplay">
			重要提示：开播后刷新页面或重新进入即可观看</view>

		<u-tabs lineWidth="25" :list="lists" keyName='name' lineColor="#ee0a24" @change="sectionChange"></u-tabs>

		<view class="chit-chat" v-if="tabsIndex === 0">

			<scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top" :bindscrolltoupper='fun'>
				<view class="view-mores" @click="viewMore(1)" v-if="total > form.page*list.length && list.length >=10">
					点击查看更多</view>
				<view style="padding: 30rpx 30rpx 240rpx;">
					<view class="message" :class="[item.isself === 1 ? 'self' : 'friend']" v-for="(item,index) in list"
						:key="index">
						<image :src="item.sender_avatar" v-if="item.isself === 0" class="avatar" mode="widthFix">
						</image>
						<!-- 	<view class="content" v-if="item.isself === 1">
							<image :src="item.content" mode="widthFix"></image>
						</view> -->
						<view class="content1">
							<text style="font-size: 20rpx; color: #999999; text-align: right;">{{ item.sender_nickname}}
								{{item.send_time}}</text>
							<view class="content">
								{{ item.content }}
							</view>
						</view>
						<image :src="item.sender_avatar" v-if="item.isself === 1" class="avatar" mode="widthFix">
						</image>
					</view>

					<view class="view-mores"
						style="position:fixed; bottom: 70px; width: 100%; text-align: center; left: 0;"
						@click="viewMore(2)" v-if="form.page > 1">
						点击查看最近消息</view>
				</view>

			</scroll-view>
			<view class="tool" :style="{'bottom':bottomVal}">
				<input type="text" v-model="content" class="input" @confirm="send" :adjust-position="false"
					@focus="inputBindFocus" @blur="inputBindBlur" />
				<button class="thumb" @click="send">发送</button>
				<!-- <image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image> -->
			</view>
		</view>
		<view class="comment" v-if="tabsIndex === 1">
			<view class="" v-html='inform.content'></view>
		</view>



	</view>
</template>

<script>
	import {
		api_getchatcontent,
		api_sendlivemsg,
		api_getonelive
	} from '@/api/product.js'
	import {
		formatDuring,
		getHTime
	} from "@/utils/util";
	import shopHead from '@/components/shop_head/index.vue'
	export default {
		components: {
			shopHead,
		},
		data() {
			return {
				errorProduct: require("@/static/img/default_image.jpg"),
				inform: {},
				tabsIndex: 0,
				lists: [{
					name: '互动'
				}, {
					name: '介绍'
				}, ],

				content: '',
				list: [],
				// lists: [],
				top: 0,
				bottomVal: '',
				// 评论信息
				commentInfo: [{}, {}, {}],
				// 用户信息
				userInfo: {},
				// 发送评论内容
				content: '',
				form: {
					limit: 10,
					page: 1,
					productid: '',
					shop_name: "db"
				},
				total: 0,
				tiem: null,
				liveplay: '',
				time: null,

			}
		},

		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.name
			})

			this.form.productid = options.id;
			this._friendAvatar = options.avatar

			this.query();
			this.getchatcontent();

		},
		mounted() {

		},
		methods: {
			reLaunch(url) {
				uni.reLaunch({
					url: url
				});
			},
			viewMore(i) {
				if (i === 1) {
					this.form.page = ++this.form.page;
				} else {
					this.form.page = 1;
				}
				this.getchatcontent();
			},
			fun(e) {
				console.log(e)
			},
			sectionChange(index) {
				this.tabsIndex = index.index;
			},
			inputBindFocus(e) {


				this.bottomVal = e.detail.height + 'px'

			},

			inputBindBlur() {

				this.bottomVal = 0;
			},


			send() {
				let obj = {
					sender_avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEJhZtMujEibgMas09e4NRNkvJsSxWO5ZEZ5yKNQZbRDFoQMJXv69fQ4BQ1CO9tVW0sIesj6iadl75RtUdd3tTSN6KQ2ZOmERbic9ic0TTVEfJ2Dug/132',
					productid: this.options.id,
					content: this.content,
					isSelf: 1,
					shop_name: "db"
				}
				// this.list.push(obj);
				this.sendlivemsg(obj)

				this.content = ''

				this.scrollToBottom()

			},
			chooseImage() {
				uni.chooseImage({
					// sourceType: 'album',
					success: (res) => {
						let obj = {
							avatar: this._selfAvatar,
							content: res.tempFilePaths[0],
							isSelf: false,
							productid: this.options.id,

							userType: 'self',
							messageType: 'image',
						}

						this.list.push(obj);
						this.sendlivemsg(obj)
						this.scrollToBottom()
					}
				})
			},
			scrollToBottom() {
				this.top = this.list.length * 1000
			},

			async query() {
				uni.showLoading({
					title: "数据加载中..."
				});
				let app = this;
				let res = await api_getonelive({
					id: this.form.productid,
					shop_name: this.form.shop_name
				});

				this.inform = res.data;
				uni.hideLoading();

				let intstarttime = parseInt(getHTime(this.inform.start_time) / 1000);

				let nowtime = parseInt(Date.now() / 1000);

				console.log(nowtime, "nowtime")
				let time = (intstarttime - nowtime) * 1000;


				let stime = setInterval(() => {
					time = time - 1000;
					app.time = formatDuring(time);
					if (time <= 0) {
						time = 0;
						this.liveplay = true;
						clearInterval(stime);
					}
				}, 1000);


			},

			// 获取聊天记录
			async getchatcontent() {
				let app = this;
				clearInterval(app.tiem);
				let res = await api_getchatcontent(app.form);
				app.total = res.data.total;
				app.list = res.data.chatdata.reverse();


				this.tiem = setInterval(async () => {
					let res = await api_getchatcontent(app.form);

					app.total = res.data.total;
					app.list = res.data.chatdata.reverse();
				}, 5000)

			},

			async sendlivemsg(obj) {
				let res = await api_sendlivemsg(obj);
				if (res.code == 1) {
					this.getchatcontent();
				}

			}
		},


		onUnload() {
			let app = this;
			clearInterval(app.tiem);

		},
	}
</script>




<style lang="scss" scoped>
	.flex-x {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 10rpx;

		.btn-item {
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			background: #1989FA;
			border-radius: 40rpx;
			color: #fff;
		}

	}

	.content-cell {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.cell-left {
			display: flex;
			align-items: center;

			img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				padding-right: 8rpx;
			}

			text {
				font-size: 26rpx;
			}
		}

		.cell-right {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			text {
				padding-left: 4rpx;
				border-left: 1px solid #999;
			}
		}
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-around;
		//这个是为了让代码块均匀分布
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
		//这个是为了让元素恢复原位
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
		//经过查看源码得知，下划线之所以错位，是因为每一个子盒子加起来并没有撑满整个盒子，所以当下划线取定位的时候，就会发生错位，因为两个子盒子宽度无法沾满整个盒子，所以就需要flex：1来沾满盒子。
	}

	.chit-chat {
		position: relative;

		.scroll-view {
			/* #ifdef H5 */


			// height: calc(100vh - 225px - 44px);
			/* #endif */
			/* #ifndef H5 */
			// height: 100vh;
			// height: 600rpx;


			/* #endif */
			height: calc(100vh - 225px - 50px - 60rpx);
			background: #eee;
			box-sizing: border-box;

		}

		.message {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
			}

			.content {
				min-height: 80rpx;
				max-width: 60vw;
				box-sizing: border-box;
				font-size: 28rpx;
				line-height: 1.3;
				padding: 20rpx;
				border-radius: 10rpx;
				background: #fff;
				word-wrap: break-word;
				/* 允许在长单词或URL中换行 */
				word-break: break-all;

				/* 允许在任意字符处换行 */
				image {
					width: 200rpx;
				}
			}

			&.self {
				justify-content: flex-end;

				.avatar {
					margin: 0 0 0 30rpx;
				}

				text {
					display: block;
					width: 100%;
					text-align: right;
				}

				.content {
					position: relative;

					&::after {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						border: 16rpx solid transparent;
						border-left: 16rpx solid #fff;
						right: -28rpx;
						top: 24rpx;
					}
				}
			}

			&.friend {
				.content {
					position: relative;

					&::after {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						border: 16rpx solid transparent;
						border-right: 16rpx solid #fff;
						left: -28rpx;
						top: 24rpx;
					}
				}
			}
		}

		.tool {
			position: fixed;
			width: 100%;
			min-height: 120rpx;
			left: 0;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 20rpx 24rpx 20rpx 40rpx;
			// padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
			// padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;

			.input {
				background: #eee;
				border-radius: 10rpx;
				height: 70rpx;
				margin-right: 30rpx;
				flex: 1;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}

			button {
				font-size: 28rpx;
				background-color: #f59e01;
				border-radius: 5px;
				color: #fff;
			}
		}

	}


	.view-mores {
		text-align: center;
		color: rgb(120, 120, 120);
		font-size: 24rpx;
		margin-top: 10px;
	}

	.bigAvatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.smallAvatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
</style>